<template>
  <div>
    <base-dialog
      class="dialog_box"
      width="75%"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :show-default-footer="false"
      @open="beforeOpenDialog">
      <div class="content">
        <div class="videoBox">
          <video id="videoElement" controls autoplay muted width="100%" height="100%" />
          <img src="@/assets/images/c6/capture.png" class="capture" @click="getSnap">
        </div>
        <div class="controlBox">
          <div class="button-group">
            <div class="outter-circle">
              <div class="inner-parts" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
                <i class="el-icon-arrow-up rotate" />
              </div>
              <div class="inner-parts" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
                <i class="el-icon-arrow-right rotate" />
              </div>
              <div class="inner-parts" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
                <i class="el-icon-arrow-left rotate" />
              </div>
              <div class="inner-parts" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
                <i class="el-icon-arrow-down rotate" />
              </div>
              <div class="inner-circle" />
            </div>
          </div>
          <div class="zoomBox">
            <i class="el-icon-zoom-in" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')" />
            <i class="el-icon-zoom-out" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')" />
          </div>
        </div>
      </div>
    </base-dialog>
  </div>
</template>
<script>
import { playVideo, getSnap, ptzControl } from '@/api/cms/monitor/play'
import flvjs from 'flv.js'
export default {
  name: 'VideoPlay',
  components: {},
  props: {
    // 弹框配置
    dialog: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      flvPlayer: null,
      flvUrl: null,
      listQuery: {
        deviceIdentification: null,
        channelId: null
      },
      ptzData: {
        deviceIdentification: null,
        channelId: null,
        command: null,
        horizonSpeed: 30,
        verticalSpeed: 30,
        zoomSpeed: 30
      }
    }
  },
  watch: {
    'dialog.visible': {
      handler(newVal) {
        console.log(newVal)
        if (this.dialog.visible) {
          this.listQuery.deviceIdentification = this.dialog.deviceIdentification
          this.listQuery.channelId = this.dialog.channelId
          this.initPage()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    initPage() {
      playVideo(this.listQuery).then(res => {
        if (res && res.flv) {
          this.flvUrl = res.flv
          if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement')
            this.flvPlayer = flvjs.createPlayer({
              type: 'flv',
              isLive: true,
              hasAudio: true,
              url: res.flv
            })
            this.flvPlayer.attachMediaElement(videoElement)
            this.flvPlayer.load()
            this.flvPlayer.play()
          }
        } else {
          this.notifiyError(res)
        }
      })
    },
    // 抓图
    getSnap() {
      if (this.flvUrl) {
        getSnap({ 'flvUrl': this.flvUrl }).then(res => {
          const blob = new Blob([res])
          const fileName = 'snap' + new Date().getMilliseconds() + '.png'
          const dlink = document.createElement('a')
          if ('download' in document.createElement('a')) { // 非IE下载
            const dlink = document.createElement('a')
            dlink.download = fileName
            dlink.style.display = 'none'
            dlink.href = URL.createObjectURL(blob)
            document.body.appendChild(dlink)
            dlink.click()
            URL.revokeObjectURL(dlink.href) // 释放URL 对象
            document.body.removeChild(dlink)
          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
      }
    },
    // 云台控制
    ptzCamera(command) {
      this.ptzData.channelId = this.listQuery.channelId
      this.ptzData.deviceIdentification = this.listQuery.deviceIdentification
      this.ptzData.command = command
      ptzControl(this.ptzData).then(res => {})
    },
    // 初始化
    beforeOpenDialog() {
    }
  }
}
</script>
<style lang="scss" scoped>
  .content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .videoBox{
    width: 800px;
    height: 600px;
    background-color: #333333;
    position: relative;
  }
  .capture{
    position: absolute;
    right: 25px;
    top: 20px;
    width: 20px;
    border-radius: 15%;
    background-color: #838283;
  }
  .controlBox{
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;

  }
  .button-group {
    width: 300px;
    height: 300px;
  }
  .outter-circle {
    position: relative;
    margin-left: 10px;
    width: 280px;
    height: 280px;
    border-radius: 100%;
    overflow: hidden;
    transform-origin: center;
    transform: rotate(45deg);
  }
  .inner-parts {
    float: left;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    font-size: 120px;
    font-weight: bold;
  }
  .inner-circle {
    position: absolute;
    margin-top: 70px;
    margin-left: 70px;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    border-radius: 100%;
  }
  .rotate {
    display: inline-block;
    transform: rotate(-45deg);
  }
  .zoomBox{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    font-size: 50px;
    font-weight: bold;
  }

  /deep/.base-dialog__footer {
    text-align: right;
  }
</style>
